<template>
  <div class="goods-info-container">
    <div class="mui-card">
      <div class="mui-card-content">
        <swifter></swifter>轮播图
      </div>
    </div>

    <div class="mui-card" v-for="item in goodsIfo" :key="item._id">
      <div class="mui-card-header">{{item.name}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：
            <del>￥{{item.old}}</del> &nbsp;&nbsp;
            销售价：
            <span class="price-now">￥{{item.now}}</span>
          </p>
          <P class="purchase-count">购买数量：</P>
          <number-box></number-box>
          <br>
          <p class="purchase">
            <mt-button type="primary" size="small">立即购买</mt-button>&nbsp;&nbsp;
            <mt-button type="danger" size="small" @click="addToShoppingCart">加入购物车</mt-button>
          </p>
        </div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>

    <div class="mui-card">
      <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(#)"></div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>Posted on January 18, 2016</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <a class="mui-card-link">Like</a>
        <a class="mui-card-link">Read more</a>
      </div>
    </div>
  </div>
</template>

<script>
// 导入轮播图组件
import Swifter from '../subComponents/Swifter.vue';
import NumberBox from '../subComponents/NumberBox.vue';
export default {
  data () {
    return {
      goodsIfo: []
    }
  },

  methods: {
    addToShoppingCart: function () {

    },

    getGoodsInfo: function () {
      this.$axios.get('http://sakumyz.xyz/api/goods-list')
        .then(res => {
          this.goodsIfo = res.data;
        })
        .catch(err => {
          console.log(error)
        });
    }
  },

  components: {
    Swifter,
    NumberBox
  },

  created () {
    this.getGoodsInfo();
  },
}
</script>

<style lang="scss" scoped>
.goods-info-container {
  .price-now {
    color: red;
    font-size: 16px;
  }
}
</style>

